<template>
  <div class="container">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" :inline="true" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入分佣人"
              v-model="searchForm.userName"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <global-card>
      <template #content>
        <div class="addAccount">
          <el-button
            type="success"
            icon="el-icon-refresh"
            size="medium"
            @click="refresh">刷新
          </el-button>
        </div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
          ref="tableRef"
          v-loading="loading"
        >
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="userCode" label="分佣人编码" align="center"/>
          <el-table-column prop="userName" label="分佣人" align="center"/>
          <el-table-column prop="getAmount" label="分佣金额" align="center"/>
          <el-table-column prop="getType" label="分佣类型" align="center"/>
          <el-table-column prop="contractCode" label="合同编号" align="center"/>
          <el-table-column prop="createTime" label="创建时间" align="center"/>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>
  </div>
</template>

<script>
  import { queryPage } from "@/api/fyAndTxMessage/fyMessage"

  export default {
    components: {

    },
    data() {
      return {
        tableData: [],
        count: 1,
        pageIndex: 1,
        pageSize: 20,
        searchForm: {
          customerName: "",
          projectName: "",
          select: ""
        },
        addOrUpdateLoading: false,
        detailsDisabled: false,
        loading: false
      }
    },
    created() {
      this.getPageCashFlow()
    },
    methods: {
      searchClick() {
        this.getPageCashFlow()
      },
      async getPageCashFlow() {
        this.loading = true
        const { customerName, projectName, select } = this.searchForm
        const { object } = await queryPage({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        })
        this.loading = false
        this.count = object.count
        this.tableData = object.data
      },
      pagination(pageItem) {
        this.getPageCashFlow(pageItem.page, pageItem.limit)
      },


      refresh() {
        this.searchForm = {
          customerName: "",
          projectName: "",
          select: ""
        }
        this.getPageCashFlow()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .title-container {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;

    .left-box {
      /*width: 600px;*/

      .formClass {
        /*display: flex;*/
        /*justify-content: space-around;*/


        ::v-deep .el-form-item {
          margin-top: 20px;
          margin-bottom: 0;

          .el-input {
            padding-right: 8px;
          }

          .el-select {
            width: 181px;
            margin-left: 10px;
          }

          .el-select .el-input {
            width: 100%;
          }
        }
      }
    }
  }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    /* cursor: no-drop; */
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .drop {
    cursor: no-drop;
  }
</style>
